﻿/*#region CurrentPermission*/
.current-permission-container {
    display: flex;
}
    .current-permission-container > .permission-container {
        width: 100%;
        min-height: 100%;
    }
        .current-permission-container > .permission-container > .permission-list {            
            overflow-y: auto;
            height: 150px;
        }
            .current-permission-container > .permission-container > .permission-list > ul {

            }
                .current-permission-container > .permission-container > .permission-list > ul > li {
                    display: block;
                    float: left;
                    border: 1px solid #eee;
                    margin: 0px 5px 5px 0px;
                    position: relative;
                    cursor: default;
                }                    
                    .current-permission-container > .permission-container > .permission-list > ul > li:hover {
                        border-color: #08c;
                    }
                    .current-permission-container > .permission-container > .permission-list > ul > li > i {
                        display: block;
                        position: absolute;
                        width: 15px;
                        height: 5px;
                        right: -1px;
                        bottom: -6px;
                        border: 1px solid #eee;
                        border-top: none;
                        background-color: white;
                        color: #ddd;
                        visibility: hidden;
                        cursor: pointer;
                    }
                        .current-permission-container > .permission-container > .permission-list > ul > li > i:before {
                            display: block;
                            height: 15px;
                            width: 15px;
                            text-align: center;
                            position: relative;
                            bottom: 9px;
                        }                        
                        .current-permission-container > .permission-container > .permission-list > ul > li:hover > i {
                            border-color: #08c;
                            visibility: visible;
                        }                        
                        .current-permission-container > .permission-container > .permission-list > ul > li.chon:hover > i {
                            color: #fff;
                            background-color: #08c;
                        }
                        .current-permission-container > .permission-container > .permission-list > ul > li > i:hover {
                            color: #08c;
                        }
                    .current-permission-container > .permission-container > .permission-list > ul > li > span {
                        font-size: 12px;
                        padding: 5px;
                        color: black;
                        background-color: white;
                        display: block;
                        height: 16px;
                        line-height: 16px;
                    }
                        .current-permission-container > .permission-container > .permission-list > ul > li.chon > span {
                            background-color: #08c;
                            color: #fff;
                        }
                    .current-permission-container > .permission-container > .permission-list > ul > li > form > input[type='text'] {
                        font-size: 12px;
                        padding: 5px;
                        color: black;
                        background-color: white;
                        display: block;
                        outline: none;
                        border: none;
                        height: 16px;
                    }
    .current-permission-container > .user-container {
        min-width: 150px;
        max-width: 150px;
        min-height: 100%;
        padding-left: 10px;
    }
        .current-permission-container > .user-container > .user-list {
            overflow-x: hidden;
            overflow-y: auto;
            height: 150px;
        }
            .current-permission-container > .user-container > .user-list > form > input[type='text'] {
                padding: 5px;
                width: calc(100% - 12px);
                border: none;
                height: 20px;
                outline: none;
                border: 1px solid #ddd;
                border-bottom: 1px solid #eee;
            }
            .current-permission-container > .user-container > .user-list > ul {
                border: 1px solid #ddd;
                border-top: none;
            }
                .current-permission-container > .user-container > .user-list > ul > li {
                    border-bottom: 1px solid #eee;
                    position: relative;
                    background-color: #fff;
                }
                    .current-permission-container > .user-container > .user-list > ul > li:nth-child(odd) {
                        background-color: #fafafa;
                    }
                    .current-permission-container > .user-container > .user-list > ul > li:last-child {
                        border-bottom: none;
                    }
                    .current-permission-container > .user-container > .user-list > ul > li > span {
                        width: calc(100% - 20px);
                        display: block;
                        font-size: 13px;
                        padding: 5px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                    .current-permission-container > .user-container > .user-list > ul > li > i {
                        display: block;
                        position: absolute;
                        width: 20px;
                        height: 20px;
                        text-align: center;
                        line-height: 20px;
                        top: calc(50% - 10px);
                        right: 0px;
                        color: transparent;
                        cursor: pointer;
                    }
                        .current-permission-container > .user-container > .user-list > ul > li:hover > i {
                            color: #ddd;
                        }
                        .current-permission-container > .user-container > .user-list > ul > li > i:hover {
                            color: #08c;
                        }
            .current-permission-container > .user-container > .user-list > ul + ul,
            .current-permission-container > .user-container > .user-list > ul.an {
                display: none;
            }
            .current-permission-container > .user-container > .user-list > ul.an + ul {
                display: block;
            }
                .current-permission-container > .user-container > .user-list > ul + ul > li > span {
                    width: 100%;
                }
                .current-permission-container > .user-container > .user-list > ul > li.chon {
                    background-color: #08c;
                    color: white;
                }
/*#endregion CurrentPermission*/
/*#region ConfigPermission*/
.config-permission-container {

}
    .config-permission-container > .config-permission {
            background-color: white;        
            border: 1px solid #ddd;
    }
        .config-permission-container > .config-permission  > ul {            

        }
            .config-permission-container > .config-permission > ul > li {
                border-bottom: 1px solid #eee;
            }
                .config-permission-container > .config-permission > ul > li:last-child {
                    border-bottom: none;
                }
                    .config-permission-container > .config-permission > ul > li > ul {
                        display: flex;
                    }
                        .config-permission-container > .config-permission > ul > li > ul > li {
                            width: 50%;
                            position: relative;
                        }
                            .config-permission-container > .config-permission > ul > li > ul > li:first-child {
                                border-right: 1px solid #eee;
                            }
                            .config-permission-container > .config-permission > ul > li:nth-child(odd) > ul > li:nth-child(even),
                            .config-permission-container > .config-permission > ul > li:nth-child(even) > ul > li:nth-child(odd) {
                                background-color: #fafafa;
                            }
                            .config-permission-container > .config-permission > ul > li > ul > li > label {
                                display: block;
                                padding: 5px;
                                font-size: 13px;
                                padding-left: 50px;
                            }
                        .config-permission-container > .config-permission > ul > li > ul > li > label > .switch {
                            position: absolute;
                            width: 40px;
                            height: 14px;
                            border: 1px solid #ddd;
                            top: calc(50% - 8px);
                            left: 5px;
                            background-color: #eee;
                        }
                            .config-permission-container > .config-permission > ul > li > ul > li > label > .switch:before {
                                content: '';
                                height: 14px;
                                float: left;
                                transition: 0.2s ease-out;
                                background-color: #08c;
                            }
                            .config-permission-container > .config-permission > ul > li > ul > li > input:disabled + label > .switch:before {
                                background-color: #bbb;
                            }
                            .config-permission-container > .config-permission > ul > li > ul > li > input:not(:checked) + label > .switch:before {
                                width: 5%;
                            }
                            .config-permission-container > .config-permission > ul > li > ul > li > input:checked + label > .switch:before {
                                width: 95%;
                            }
                            .config-permission-container > .config-permission > ul > li > ul > li > input:not(:checked) + label:hover > .switch:before {
                                width: 15%;
                            }
                            .config-permission-container > .config-permission > ul > li > ul > li > input:checked + label:hover > .switch:before {
                                width: 85%;
                            }
/*#endregion ConfigPermission*/     